<!--教学任务查询-->
<template>
  <div id="term-execution-plan">
    <div class="assessment-container">
      <div class="search-container">
        <div class="search-container-left" style="display: flex;align-items: center;">
          <div class="search-container-item">
            <span>学期：</span>
            <el-select
              v-model="xq"
              style="width: 90px"
              size="mini"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in xqList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div class="search-container-item">
            <span>年级：</span>
            <el-select
              v-model="nj"
              style="width: 90px"
              size="mini"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in njList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div class="search-container-item">
            <span>培养层次：</span>
            <el-select
              v-model="pycc"
              style="width: 90px"
              size="mini"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in pyccList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div class="search-container-item">
            <span>状态：</span>
            <el-select
              v-model="zt"
              style="width: 90px"
              size="mini"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in ztList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div class="search-button" @click="handleSearch">
            <img src="../../../../assets/assessment/icon-search.png" alt="" />
            <span>查询</span>
          </div>
        </div>
        <div class="search-container-right">
          <el-button
            plain
            type="warning"
            @click="syncShow"
            icon="el-icon-refresh"
            size="mini"
            >同步</el-button
          >
          <el-button
            plain
            type="success"
            @click="exportData"
            icon="el-icon-upload2"
            size="mini"
            >导出</el-button
          >
          <el-button
            plain
            type="warning"
            @click="planImport"
            icon="el-icon-download"
            size="mini"
            >批量从培养方案导入</el-button
          >
          <el-button
            plain
            type="primary"
            @click="submitInfo"
            icon="el-icon-circle-check"
            size="mini"
            >确认</el-button
          >
          <el-button
            plain
            type="danger"
            @click="chexiaoInfo"
            icon="el-icon-btn-chexiao"
            size="mini"
            >撤销</el-button
          >
        </div>
      </div>
    </div>
    <div class="assessment-container">
      <div class="table-container">
        <el-table
          ref="tableData"
          :data="tableData"
          border
          style="width: 100%; height:calc(100vh - 372px); overflow-y: auto"
          class="table-data"
          row-class-name="row-class"
          cell-class-name="cell-class"
          header-row-class-name="header-row-class"
          header-cell-class-name="header-cell-class"
          @selection-change="handleSelectionChange"
          :row-key="getRowKeys"
        >
          <el-table-column width="100" align="center" :reserve-selection="true" type="selection">
          </el-table-column>
          <el-table-column
            prop="specialtyName"
            label="专业班次"
            width="300"
            align="center"
          >
            <template slot-scope="scope">
              <div class="flex-posi">
                <div>{{ scope.row.className }}</div>
                <div style="margin-left: 10px; cursor: pointer">
                  <img
                    style="width: 20px"
                    src="../../../../assets/assessment/icon-plan-record-detail.png"
                    @click="editBtn(scope.row)"
                  />
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="year" label="年级" width="300" align="center">
          </el-table-column>
          <el-table-column prop="specialtyName" label="专业" align="center">
          </el-table-column>
          <el-table-column prop="courseCount" label="门数" align="center">
          </el-table-column>
          <el-table-column prop="state" label="状态" align="center">
            <!--<template slot-scope="scope">-->
              <!--<span v-if="scope.row.state == '0'">未确认</span>-->
              <!--<span v-if="scope.row.state == '1'">已确认</span>-->
            <!--</template>-->
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="wrapper-container">
      <div class="bottom-block" style="display: block;margin:0 50px">
        <div class="text">
          当前共找到{{ total }}条记录,当前显示{{ startPage }}-{{ endPage }}条
        </div>
        <div class="export-button" @click="exportData">
          <img src="../../../../assets/assessment/icon-export.png" alt="" />
          <span>&ensp;导出Excel</span>
          <!-- <download-excel
            class="export-btn"
            :data="tableData"
            :fields="jsonFields"
            type="xls"
            name="制定专业班次学期执行计划.xls"
            style="color: #f3b815"
          >
            &ensp;导出Excel
          </download-excel> -->
        </div>
      </div>
      <div class="pagination-block">
        <el-pagination
          prev-text="上一页"
          next-text="下一页"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="syncShowTip"
      width="800px"
      class="xxtb"
    >
      <div class="class-tip">一旦同步，数据将不能恢复，您确定要同步么？</div>
      <span slot="footer" class="dialog-footer">
        <el-button
          plain
          type="warning"
          style="margin-right: 50px"
          @click="tipConfirm"
          >确 定</el-button
        >
        <el-button type="danger" plain  @click="syncShowTip = false"
          >取 消</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ButtonItem from "@/components/ButtonItem.vue";
import {
  queryZdzybcxqzxjhList,
  zdzybc_submit_Course,
  zdzybc_chexiao_Course,
  zdzybc_tongbu_Course,
  queryCommonXueqi,
  queryCommonNj,
  queryCommonPyccId,
  queryCommonXueqiJhStatus,
  queryZdzybcxqzxjhList_export,
  queryZdzybcxqzxjhRws_export,
  queryDefaultXueQi
} from "@/api/trainingManagement/place.js";
export default {
  components: { ButtonItem },
  data() {
    return {
      selectPlanList: [], //选中计划数据
      jsonFields: {
        专业班次: "specialtyName",
        年级: "year",
        专业: "className",
        门数: "coursrCount",
        状态: "state",
      },
      syncShowTip: false,
      xq: "", // 学期
      xqList: [],
      nj: "", // 年级
      njList: [],
      zt: "", //状态
      ztList: [],
      pycc: "", //培养层次
      pyccList: [],
      tableData: [], //专业班次列表
      total: 0, //总条数
      pageSize: 50, //条数
      startPage: 0, //开始条数
      endPage: 0, //结束条数
      currentPage: 1, //当前页数
    };
  },
  mounted() {
    this.queryCommonXueqiJhStatus();
    this.queryCommonPycc();
    this.queryCommonNj();
    this.queryCommonXueqi();
    this.getDefaultXueQi();
    // this.queryZdzybcxqzxjhList(); //查询列表接口
  },
  methods: {
    handleSearch(){
      this.$refs.tableData.clearSelection()
      this.queryZdzybcxqzxjhList()
    },
    // 导出
    exportData() {
      var xq = this.xq;
      var nj = this.nj;
      var pycc = this.pycc;
      var zt = this.zt;
      let ids = this.selectPlanList.map(item => item.id)

      queryZdzybcxqzxjhRws_export(xq, nj, pycc, zt, ids.toString()).then((res) => {
        /** 获取生成设置好的文件名 */
        // var filename = res.headers["content-disposition"];
        // filename = filename.split("=")[1];
        // // 我看好多博客此处没有再次编码，我这里不重新编码，文件名称总是乱码
        // filename = escape(filename);
        // filename = decodeURIComponent(filename, "utf-8");
        // console.log(filename);
        // console.log(res.data);
        /** 接收文件流 */
        const blob = new Blob([res.data]);
        let url = URL.createObjectURL(blob);
        /** 模拟浏览器操作Document，并模拟下载动作 */
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", "制定专业班次培养计划.xlsx");
        document.body.appendChild(link);
        link.click();
      });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.queryZdzybcxqzxjhList();
    },
    // 获取状态
    queryCommonXueqiJhStatus() {
      queryCommonXueqiJhStatus().then(res=>{
        if (res.data.code == 200) {
          this.ztList = res.data.data;
        }
      })
    },
    // 获取培养层次列表
    async queryCommonPycc() {
      const res = await queryCommonPyccId();
      if (res.data.code == 200) {
        this.pyccList = res.data.data;
      }
    },
    // 获取年级列表
    async queryCommonNj() {
      const res = await queryCommonNj("");
      if (res.data.code == 200) {
        this.njList = res.data.data;
      }
    },
    // 获取学期列表
    async queryCommonXueqi() {
      const res = await queryCommonXueqi();
      if (res.data.code == 200) {
        this.xqList = res.data.data;
      }
    },
    async getDefaultXueQi(){
      queryDefaultXueQi().then(res=>{
        if(res.data.code == 200){
          this.xq = res.data.data
        }
      }).then(()=>{
        this.queryZdzybcxqzxjhList()
      })
    },
    getRowKeys(row) {
      return row.id
    },
    // 查询专业班次列表信息
    queryZdzybcxqzxjhList() {
      var xq = this.xq;
      var nj = this.nj;
      var pycc = this.pycc;
      var zt = this.zt;
      var current = this.currentPage;
      var size = this.pageSize;
      queryZdzybcxqzxjhList(xq, nj, pycc, zt, current, size).then(res=>{
        if (res.data.code == 200) {
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
          var length = res.data.data.records.length;
          this.calculatePage(this.pageSize, res.data.data.current, length);
        }
      })
    },
    // 计算开始和结束条数
    calculatePage(pageSize, current, length) {
      if (current == 1) {
        if (length != 0) {
          this.startPage = 1;
          this.endPage = length;
        }
      } else {
        this.startPage = pageSize * (current - 1) + 1;
        this.endPage = parseInt(this.startPage) + parseInt(length) - 1;
      }
    },
    editBtn(row) {
      this.$router.push({
        path: "/admin/teachingTaskManage/profCourse",
        query: {
          id: row.id,
          xq: this.xq,
        },
      });
    },
    planImport() {
      // if (this.selectPlanList.length > 0) {
        var nj = [];
        var zyId = [];
        this.selectPlanList.forEach((item) => {
          nj.push(item.year);
          zyId.push(item.id);
        });
        this.$router.push({
          path: "/admin/teachingTaskManage/planImport",
          query: {
            zyId: zyId,
            xueqi: this.xq,
          },
        });
      // } else {
      //   this.$message.warning("请先选择执行计划!");
      //   return;
      // }
    },
    // 数据同步
    async tipConfirm() {
      if (this.xq == "" || this.xq == null) {
        this.$message.warning("请先选择学期!");
        return;
      }
      let idArr = [];
      this.selectPlanList.forEach((item) => {
        idArr.push(item.id);
      });
      var para = { xueqi: this.xq, list: idArr };
      const res = await zdzybc_tongbu_Course(para);
      if (res.data.code == 200) {
        this.$message.success("保存成功！");
        this.queryZdzybcxqzxjhList()
        this.syncShowTip = false;
      }
    },
    syncShow() {
      if (this.selectPlanList.length > 0) {
        let selectPlanFlag = false;
        this.selectPlanList.forEach(item=>{
          if(item.courseCount <= 0){
            selectPlanFlag = true;
          }
        })
        if(selectPlanFlag){
          this.$message.warning("所选专业班次存在课程门数为0，无法进行同步！");
        }else{
          this.syncShowTip = true;
        }
      } else {
        this.$message.warning("请先选择需要同步的专业班次课程！");
      }
    },
    addHours() {
      this.$router.push("/teacher/workload/ClassTimeQuery");
    },
    // 表格数据选中
    handleSelectionChange(val) {
      this.selectPlanList = val;
    },
    // 确认功能
    async submitInfo() {
      let querenFlag = false;
      let querenState = false;
      console.log('---------', this.selectPlanList)
      if (this.selectPlanList.length > 0) {
        let idArr = [];
        this.selectPlanList.forEach((item) => {
          if(item.state == '已确认'){
            querenState = true;
            return;
          }
          if(item.courseCount == 0){
            querenFlag = true;
            return;
          }
          idArr.push(item.id);
        });
        if(querenState){
          this.$message.warning('确认失败，当前所选数据已有已确认的课程,无需重复确认')
          return;
        }
        if(querenFlag){
          this.$message.warning('确认失败，专业班次门数必须大于0')
          return;
        }
        var params = {
          xueqi: this.xq,
          list: idArr,
        };
        const res = await zdzybc_submit_Course(params);
        if (res.data.code == 200) {
          this.$refs.tableData.clearSelection()
          this.$message.success("保存成功！");
          this.queryZdzybcxqzxjhList();
        }
      } else {
        this.$message.warning("请先选中需要确认的数据！");
      }
    },
    // 撤销
    async chexiaoInfo() {
      if (this.selectPlanList.length > 0) {
        let idArr = [];
        this.selectPlanList.forEach((item) => {
          idArr.push(item.id);
        });
        var params = {
          xueqi: this.xq,
          list: idArr,
        };
        const res = await zdzybc_chexiao_Course(params);
        if (res.data.code == 200) {
          this.queryZdzybcxqzxjhList();
          this.$refs.tableData.clearSelection()
          this.$message.success("撤销成功！");
        }
      } else {
        this.$message.warning("请先选中需要撤销的数据！");
      }
    },
  },
};
</script>


<style lang="less" scoped>
.plan-entry-table-container {
  margin-top: 30px;
  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }
  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 82px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
  .el-table th.el-table__cell > .cell {
    padding: 0;
  }
  .el-table .cell,
  .el-table--border .el-table__cell:first-child .cell {
    padding: 0;
  }
  .el-table__body td .cell {
    padding: 0;
  }

  .add-button {
    margin: 0 auto;
    cursor: pointer;
    background: #fff6ef;
    border: 1px solid #f3b815;
    width: 65px;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f3b815;
    }
    > img {
      width: 13px;
      height: 13px;
      margin-right: 8px;
    }
  }
  .pass-text {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #51aef6;
  }
  .wait-text {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ff3819;
  }
  .watch-button {
    width: 76px;
    height: 36px;
    background: #fef1e8;
    border: 1px solid #f86900;
    border-radius: 6px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #f86900;
    line-height: 16px;
    margin: 2px auto;
  }
}
</style>

<style lang="less" scoped>
.assessment-container {
  width: 100% !important;
  padding: 0 60px;
  // width: 1603px;
  margin: 0 auto;
  .search-container {
    margin-top: 27px;
    // padding-left: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .search-container-left,
    .search-container-right {
      margin-top: 0px !important;
      display: flex;
      flex-direction: row;


    }
    .search-container-item {
      color: #004ca7;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      margin-right: 30px;
      > span {
        margin-right: 6px;
      }
    }
    .search-button {
      width: 77px;
      height: 28px;
      line-height: 28px;
      background: #f1f8fe;
      border: 1px solid #51aef6;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      > span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #51aef6;
      }
      > img {
        width: 20px;
        height: 20px;
        margin-right: 4px;
      }
    }
  }
  .class-tip {
    color: #004ca7;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin: 40px;
  }
  .plan-entry-table-container {
    margin-top: 30px;
    .table-data {
      width: 100%;
      border: 0.8px solid #004ca7;
      /*border-radius: 9px;*/
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #004ca7;
    }
  }
}
</style>
<style lang="less" scoped>
@import "../../../../styles/text.less";
// 表格底部样式
@import "../../../../styles/delayedExam.less";
@import "../../../../styles/supervision.less";

.pagination-block {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.flex-posi {
  display: flex;
  align-items: center;
  justify-content: center;
}

.export-btn {
  cursor: pointer;
}

.xxtb {
  /deep/ .el-dialog {
    height: 320px;
  }
}

.wrapper-container {
  width: calc(100% - 20px);
  margin: 0 auto;
}

/deep/ .table-container {
  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .wrapper-button {
    display: flex;
    flex-direction: column;
    align-items: center;

    > div {
      margin-bottom: 8px;
    }
  }
  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    /*border-radius: 9px;*/
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}

.wrapper-container .search-container .search-container-left {
  flex-wrap: wrap;
  .search-container-item {
    width: 12%;
    margin-right: 0px;
    .box {
      > span {
        text-align: left;
      }
      display: flex;
      justify-content: space-evenly;
      margin-bottom: 20px;
      align-items: center;
      /deep/ .el-input__inner {
        height: 28px;
      }
    }
  }
}

/deep/.el-date-editor.el-input {
  width: 110px;
}
/deep/ .el-input--medium {
  width: 110px;
  .el-input__inner {
    height: 28px;
    width: 110px;
    padding: 0px 18px;
  }
}
/deep/ .el-table thead {
  color: #004ca7 !important;
}

.xxts {
  /deep/ .el-dialog {
    height: 320px;
  }
}

.btn {
  margin-top: 271px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 271px;
  .submit {
    width: 84px;
    height: 27px;
    line-height: 8px;
  }
}
.bottom-block {
  // display: flex;
  flex-direction: row;
  justify-content: space-between !important;
  .export-button {
    cursor: pointer;
    width: 127px;
    height: 27px;
    background: #fff6ef;
    border: 1px solid #f3b815;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    > img {
      width: 17px;
      height: 17px;
    }
    > span {
      margin-left: 12px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f3b815;
    }
  }
  .text {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 39px;
    color: #004ca7;
  }
}

.a-span {
  text-decoration: underline;
  cursor: pointer;
}

.class-tip {
  color: #004ca7;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin: 40px;
}

.assessment-container {
  width: calc(100% - 20px);
  .table-container {
    width: 100%;
  }
}
</style>

<style lang="less" scoped>
  #term-execution-plan{
    /deep/ .el-button--warning.is-plain{
      background: #FFF6EF;
      border-color: #F3B815;
      color: #F3B815;
      border-radius: 6px;
    }
    /deep/ .el-button--warning.is-plain:focus, .el-button--warning.is-plain:hover{
      color: #F3B815;
      background: #FFF6EF;
      border: 1px solid #F3B815;
      border-radius: 6px;
    }

    /deep/ .el-button--success.is-plain{
      background: #F1FFF8;
      border-color: #02C86C;
      color: #02C86C;
      border-radius: 6px;
    }
    /deep/ el-button--success.is-plain:focus, .el-button--success.is-plain:hover{
      background: #F1FFF8;
      border: 1px solid #02C86C;
      color: #02C86C;
      border-radius: 6px;
    }

    /deep/ .el-button--primary.is-plain{
      background: #F1F8FE;
      border-color: #51AEF6;
      color: #51AEF6;
      border-radius: 6px;
    }

    /deep/ .el-button--primary.is-plain:focus, .el-button--primary.is-plain:hover{
      background: #F1F8FE;
      border: 1px solid #51AEF6;
      color: #51AEF6;
      border-radius: 6px;
    }

    /deep/ .el-icon-btn-chexiao{
      background: url('../../../../assets/home/chexiao.png') no-repeat;
      font-size: 16px;
      background-size: cover;
    }
    /deep/ .el-icon-btn-chexiao:before{
      content: '替';
      font-size: 16px;
      visibility: hidden;
    }

    /deep/ .el-button--danger.is-plain{
      background: #FFEFEF;
      border-color: #FF3819;
      color: #FF3819;
      border-radius: 6px;
    }

    /deep/ .el-button--danger.is-plain:focus, .el-button--danger.is-plain:hover{
      background: #FFEFEF;
      border: 1px solid #FF3819;
      color: #FF3819;
      border-radius: 6px;
    }
  }
</style>
